<template>
  <div class="recharge-page">
    <el-card shadow="always">
      <div slot="header">
        <line-header title="在线充值"></line-header>
      </div>
      <div class="card-body">
        <div class="card-top-box">
          <div class="top-text-box">充值须知：</div>
          <div class="top-text-box">a. 充值金额必须为整数</div>
          <div>
            <span class="top-text-box">b. 充值过程中浏览器会有几次跳转，</span>
            <span class="top-sign-text top-text-box"
            >支付完成之前请勿关闭浏览器</span
            >
            <span class="top-text-box">，否则可能造成支付失败</span>
          </div>
          <div>
            <span class="top-text-box"
            >c. 如充值后款项没有到账请联系在线客服帮助处理，</span
            >
            <span class="top-sign-text top-text-box">提交工单</span>
          </div>
        </div>
        <div class="card-bottom-box">
          <el-form
            ref="form"
            :model="form"

            label-width="100px"
          >
            <el-form-item label="可用余额:">
              <span class="balance-box">{{ Math.round((balance*100)/100)}}</span>
            </el-form-item>
            <el-form-item label="充值金额:" prop="amount">
              <el-input
                v-model="form.amount"
                placeholder="请输入充值金额"
              ></el-input>
            </el-form-item>
            <el-form-item label="充值渠道" prop="type">
              <el-radio-group v-model="form.type">
                <el-radio label="2">
                  <div class="radio-content-box">
                    <el-image
                      style="width: 30px; height: 30px"
                      :src="require('@/assets/icon/alipay.png')"
                    ></el-image>
                    <div class="radio-text-box">支付宝支付</div>
                  </div>
                </el-radio>
                <el-radio label="1"
                >
                  <div class="radio-content-box">
                    <el-image
                      style="width: 30px; height: 30px"
                      :src="require('@/assets/icon/wechat.png')"
                    ></el-image>
                    <div class="radio-text-box">微信支付</div>
                  </div>
                </el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <div class="bottom-btn-box">
          <el-button type="primary" @click="hkSubmit">确认</el-button>
          <el-button type="primary" plain @click="resetForm">
            重置
          </el-button>
        </div>

        <el-dialog
          title="支付方式"
          :visible.sync="dialogTableVisible"
          style="margin-top: 35vh;"
        >
          <div style="    width: 610px;margin: auto;display: flex;    align-items: center;">
            <span style="font-size: 1.2rem;color: #146223;margin: 1rem 0;text-align: center;    width: 194px;margin-right: 80px;">
              <span style="font-size: 20px;font-weight: bold;line-height: 38px;color: #333333;margin-bottom: 23px;    display: block;">微信支付</span>
              <span v-if="wxOrderUrl.length>5" style="position: relative;display: block;width:194px;height: 194px;">
                <img  src="../../../assets/icon/icon_box.png" style="position: absolute;width: 100%;height: 100%;" />
                <img
                     :src="wxOrderUrl"
                     style="width: 100%;margin: auto;"
                />
              </span>

            </span>
            <span>
              <span style="font-size: 16px;">应付金额：<span style="font-size: 14px;color: #E60012;">￥</span><span style="font-size: 30px;color: #E60012;">{{Number(form.amount).toFixed(2)}}</span></span>
              <br>
              <br>
              <span>
                <img src="../../../assets/icon/icon_wechat.png" style="margin-right: 6px;">
                <span style="font-weight: 400;font-size: 14px;color: #666666;line-height: 38px;">使用微信扫码付款</span>
              </span>
            </span>
          </div>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
  import LineHeader from "@/components/line-header/index";
  import {mapGetters} from "vuex"
  import {trace} from "../../../utils/trace"
  import QRcode from "qrcode"

  export default {
    components: {
      LineHeader
    },

    props: {},
    data() {
      return {
        wxOrderUrl: "",
        dialogTableVisible: false,
        form: {
          amount: "",
          type: "1"
        },
        formRules: {
          amount: [
            {
              required: true,
              message: "请输入充值金额",
              trigger: ["blur", "change"]
            }
          ]
        }
      };
    },
    watch: {},
    computed: {
      ...mapGetters([
        'balance'
      ])
    },
    methods: {
      hkSubmit() {
        this.$refs.form.validate(valid => {
          // if (valid) {
          let amount = Number(this.form.amount) * 100;
          let kind = this.form.type;
          if (amount < 1) return;
          this.$store.dispatch('finance/charge', {amount, kind}).then((data) => {
            trace("充值---data", data)

            if (data.link) {
              window.open(data.link);
            } else {
              this.showWXQRcode(data.code);
            }
            this.verify();
          }).catch((err) => {
            trace("err=", err)
          })
          // } else {

          //   return false;
          // }
        });
      },
      showWXQRcode: function (url) {
        this.imgData = "",
          QRcode.toDataURL(url, {
            type: "image/png", //类型
            quality: 1, //图片质量A Number between 0 and 1
            width: 320, //高度
            height: 320, //宽度
            errorCorrectionLevel: "L", //容错率
            margin: 5, //外边距
            color: {
              dark: "#050505", //前景色
              // light: "#146223" //背景色
            }
          }).then(imgData => {
            this.wxOrderUrl = imgData;

            this.dialogTableVisible = true;
          })
      },
      resetForm() {
        this.$refs.form.resetFields();
      }
    },
    created() {
    },
    mounted() {
    }
  };
</script>
<style lang="scss" scoped>
  .card-body {
    max-width: 80%;
    margin: 0 auto;

    .card-top-box {
      border-radius: 10px;
      background-color: #d5d8da2a;
      padding: 20px;

      .top-text-box {
        line-height: 30px;
      }

      .top-sign-text {
        color: #ff1f34;
      }
    }

    .card-bottom-box {
      width: 50%;
      margin: 50px auto;

      .balance-box {
        font-size: 30px;
        font-weight: 500;
      }

      .el-radio,
      .el-radio-group {
        display: flex;
        align-items: center;

        .radio-content-box {
          text-align: center;

          .radio-text-box {
            margin-top: 5px;
            font-size: 14px;
          }
        }
      }
    }

    .bottom-btn-box {
      text-align: center;
      margin: 50px;
    }
  }

  ::v-deep .el-dialog {
    border-radius: 10px;
  }

  ::v-deep .el-dialog__header {
    background: #134BDF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  ::v-deep .el-dialog__title {
    color: white;
  }

  ::v-deep .el-dialog__headerbtn .el-dialog__close{
    color: white;
  }
</style>
